<!DOCTYPE html>
<html>
<head>
	<title>表单 div、Text</title>
	<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">

</head>
<body>
	<div ng-app="app">
		<div class="container">
			<form name="form" ng-controller="firstController">
				<div class="form-group" ng-class="{'has-error':form.username.$touched && form.username.$invalid}">
					<label class="col-sm-2">用户名</label>
					<div class="col-sm-10">
						<input type="text" name="username"	class="form-control" placeholder="请输入用户名" ng-model="data.username" ng-required="true" ng-minlength="3" ng-maxlength="10" ng-pattern="/^[a-zA-Z]{1,}/" autocomplete="off" />

						<div ng-show="form.username.$error.maxlength" class="alert alert-danger help-block">
							<p>用户名长度超过10！</p>
						</div>
						<div ng-show="form.username.$error.minlength" class="alert alert-danger help-block">
							<p>用户名长度不少于3位！</p>
						</div>
						<div ng-show="form.username.$error.pattern" class="alert alert-danger help-block">
							<p>用户名必须以a-zA-z开始！</p>
						</div>
					</div>
				</div>
			</form>
		</div>

	</div>

	<script type="text/javascript" src="../angular/angular-1.6.5.min.js"></script>
	<script type="text/javascript" src="app/index.js"></script>
</body>
</html>